<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"  href="css/base.css"/>
		<script src="js/jquery.min.js"></script>
		<link href="主页demo/js/layui/css/layui.css" rel="stylesheet"/>
		<script src="主页demo/js/layui/layui.js"></script>
		<link rel<link rel="stylesheet"  href="css/common.css"/>
		<style type="text/css">
			body,html{
				width: 100%;
			}
			
	.swiper-container {
    width: 100%;
    height: 300px;
	}  

		</style>
	</head>
	<body>
		<div class="main">
			<!-- <div class="layui-carousel" id="test1">
			  <div carousel-item>
			    <div><img src="img/1.jpg" style="width: 100%;height: 100%;"></div>
			    <div><img src="img/1.jpg" style="width: 100%;height: 100%;"></div>
			    <div><img src="img/1.jpg" style="width: 100%;height: 100%;">0</div>
			    <div>条目4</div>
			    <div>条目5</div>
			  </div>
			</div> -->
		
			
			
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">Slide 1</div>
			        <div class="swiper-slide">Slide 2</div>
			        <div class="swiper-slide">Slide 3</div>
			    </div>
			    <!-- 如果需要分页器 -->
			    <div class="swiper-pagination"></div>
			    
			    <!-- 如果需要导航按钮 -->
			    <div class="swiper-button-prev"></div>
			    <div class="swiper-button-next"></div>
			    
			    <!-- 如果需要滚动条 -->
			    <div class="swiper-scrollbar"></div>
			</div>
		</div>

		<div style="width: 19.6rem;height: 200px;background-color: red;">
			
		</div>
		
		
		
		<script src="js/swiper-bundle.min.js"></script>
		<script>
			$(function(){
			// layui.use('carousel', function(){
			//   var carousel = layui.carousel;
			//   //建造实例
			//   carousel.render({
			//     elem: '#test1'
			//     ,width: '100%' //设置容器宽度
			//     ,arrow: 'always' //始终显示箭头
			//     //,anim: 'updown' //切换动画方式
			//   });
			// });
			
			  var mySwiper = new Swiper ('.swiper-container', {
			    // direction: 'vertical', // 垂直切换选项
			    loop: true, // 循环模式选项
			    
			    // 如果需要分页器
			    pagination: {
			      el: '.swiper-pagination',
			    },
			    
			    // 如果需要前进后退按钮
			    navigation: {
			      nextEl: '.swiper-button-next',
			      prevEl: '.swiper-button-prev',
			    },
			    
			    // 如果需要滚动条
			    scrollbar: {
			      el: '.swiper-scrollbar',
			    },
			  })   
			})
		</script>
	</body>
</html>
